<template>

    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>日志列表</el-breadcrumb-item>
    </el-breadcrumb>


    <!--搜索区域 -->
    <div style="border: solid black 1px; padding: 20px; margin-top: 10px;">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="日志内容">
                <el-input v-model="searchForm.LogContent" placeholder="请输入日志内容" clearable />
            </el-form-item>
            <el-form-item label="操作人">
                <el-input v-model="searchForm.CreateName" placeholder="请输入操作人" clearable />
            </el-form-item>

            <el-form-item label="日志时间">
                <el-date-picker v-model="searchForm.CreatTime" type="date" placeholder="请选择时间" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()">查询</el-button>
            </el-form-item>
        </el-form>
    </div>


    <!-- table 区域 -->
    <div style="border: solid black 1px; padding: 20px; margin-top: 10px;">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="日志编号" width="250" />
            <el-table-column prop="logContent" label="日志内容" width="320" />
            <el-table-column prop="createName" label="操作人" width="220" />
            <el-table-column prop="creatTime" label="添加时间" width="220" />
            <!-- <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default>
                <el-button link type="primary" size="small">
                    详情
                </el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
</el-table-column> -->
        </el-table>
    </div>

    <table>
        <tr>

            <td> <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" layout="slot, sizes" :total="page.totalCount">
                    <span>每页{{ page.PageSize }}条 ,共{{ page.PageIndex }} /{{ page.totalPage }}页</span>
                </el-pagination>
            </td>

            <!-- 首页 -->
            <td> <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" layout="slot, prev, pager, next"
                    :total="page.totalCount">
                    <el-button @click="page.PageIndex == 1">首页</el-button>
                </el-pagination>
            </td>
            <td> <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" layout="jumper,slot" :total="page.totalCount">
                    <el-button @click="page.PageIndex == page.totalPage">尾页</el-button>
                </el-pagination>
            </td>
        </tr>

    </table>

</template>

<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref, watch } from 'vue';


const searchForm = reactive({
    LogContent: '',
    CreateName: '',
    CreatTime: ''
})
//分页相关参数
const page = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    totalPage: 0
});


//分页动作监听
watch(page, () => {
    getData();
});

//table 数据
const tableData = ref([])
const getData = () => {
    axios.get('http://localhost:5071/api/Log/GetLogPage', {
        params: {
            LogContent: searchForm.LogContent,
            CreateName: searchForm.CreateName,
            CreatTime: searchForm.CreatTime,
            PageIndex: page.PageIndex,
            PageSize: page.PageSize
        }
    }).then((res) => {
        if (res.data.code == 200) {
            tableData.value = res.data.items;
        }
    });

}


//钩子函数-页面加载生命周期
onMounted(() => {
    getData();
});

</script>